<template>
  <transition name="fadeIn">
    <div class="toast-box" v-show="isShow">
      <div class="toast-mask" v-show="isMarkShow"></div>
      <transition :name="translate">
        <div class="toast-main" :class="position" v-show="isShow">
          {{text}}
        </div>
      </transition>
    </div>
  </transition>
</template>
<style scoped lang="scss" rel="stylesheet/scss">
  .toast-main {
    position: fixed;
    top: 50%;
    left: 50%;
    height: 1rem;
    padding: 0 0.3rem;
    margin-top: -0.5rem;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.7);
    text-align: center;
    font-size: .32rem;
    line-height: 1rem;
    color: #ffffff;
    z-index: 5000;
  }

  .top {
    top: 1rem;
    margin-top: 0;
  }

  .center {
    top: 50%;
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -o-transform: translate(-50%);
    transform: translate(-50%);
  }

  .bottom {
    top: auto;
    bottom: 1rem;
    margin-top: 0;
  }

  .toast-mask {
    position: fixed;
    z-index: 4999;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .fadeIn-enter-active, .fadeIn-leave-active {
    transition: opacity 0.3s;
  }

  .fadeIn-enter, .fadeIn-leave-active {
    opacity: 0;
  }
</style>
<script type="text/ecmascript-6">
  let allowType = ['top', 'middle', 'bottom']
  export default {
    props: {
      isShow: {
        type: Boolean,
        default: false
      },
      text: {
        type: String,
        default: 'Loading'
      },
      position: {
        type: String,
        default: 'center',
        validator(value) {
          return allowType.indexOf(value) > -1
        }
      },
      isMarkShow: {
        type: Boolean,
        default: false
      },
      time: {
        type: Number,
        default: 1500
      },
      transition: {
        type: Boolean,
        default: true
      }
    },
    computed: {
      translate() {
        if (!this.transition) {
          return ''
        } else {
          if (this.position === 'top') {
            return 'translate-top'
          } else if (this.position === 'middle') {
            return 'translate-middle'
          } else if (this.position === 'bottom') {
            return 'transition-bottom'
          }
        }
      }
    }
  }
</script>
